<template>
  <div id="app" class="form-theme">
    <el-radio v-model="radio" label="1">
      备选项
    </el-radio>
    <el-color-picker v-model="color" />
    <div :style="cssVars">
      <p class="text">
        测试文本
      </p>
      <el-button type="primary">
        测试
      </el-button>
      <el-input />
      <el-input-number v-model="num" :min="1" :max="10" label="描述文字" @change="handleChange" />
      <el-select v-model="value" placeholder="请选择" popper-class="t-select-popper">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-cascader
        v-model="value"
        popper-class="t-cascader-popper"
        :options="options1"
        @change="handleChange"
      />
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
      <el-slider v-model="value" />
      <el-date-picker
        v-model="value"
        type="datetime"
        placeholder="选择日期时间"
      />
      <el-rate :value="value" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  data() {
    return {
      color: "red",
      options1: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  computed: {
    cssVars() {
      return {
        "--form-theme-color": this.color
      }
    }
  },
  methods: {
    change() {
    }
  }
}
</script>
<style lang="scss">
$themeColor: var(--form-theme-color);
@import "../../formgen/src/assets/styles/custom-theme-popper";
</style>

<style lang="scss"  scoped>
$themeColor: var(--form-theme-color);
@import "../../formgen/src/assets/styles/custom-theme";
</style>
